<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input v-model="addressInfo.name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input v-model="addressInfo.phone" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input :value="addressInfo.address"  style="width: 500rpx;" disabled type="text"  placeholder-class="line" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea v-model="addressInfo.addressDetal" type="text" placeholder-class="line" placeholder="街道、楼牌等" />
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">

			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><u-switch v-model="checked" active-color="#FCBD71" @change="setDefault"></u-switch></view>
			</view>
		</view>
		<view class="delSite" @tap="toDel" v-if="addressInfo.addressId">
			<view class="add">
				删除
			</view>
		</view>
		<view class="addSite" @tap="toSaveSite" :style="addressInfo.addressId? 'width:300rpx':'width:600rpx;left: 80rpx;'">
			<view class="add">
				保存
			</view>
		</view>
		<u-modal
		v-model="tanchuangShow" 
		@confirm="tcConfirm" 
		@cancel="tcCancel" ref="uModal" 
		:content="content" 
		:show-title="false" 
		:show-cancel-button='true'></u-modal>
		<u-picker mode="region" ref="uPicker" :area-code="areaCode" @confirm="confirm" @cancel="cancel" :safe-area-inset-bottom="true" v-model="show" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			tanchuangShow:false,
			content:'是否删除该地址',
			show: false,
			areaCode:['11','1101','110101'],
			addressInfo:{
				userId:'',
				name:'',
				phone:'',
				address:'',
				addressDetal:'',
				isDefault:0,
				addressId:0,
				areaCode:''
			
			},
			checked:false,
			
		};
	},
	methods: {
		async tcConfirm(){
			//弹窗的确认操作
			const res = await this.$u.api.delAddress(this.addressInfo.addressId)
			
			if(res == true){
				this.$u.toast("删除成功")
				setTimeout(()=>{
					this.$u.route({
						type:'back'
					})
				},1000)
			}
			
		},
		tcCancel(){
			//弹窗的取消操作
			this.tanchuangShow = false;
		},
		toDel(){
			this.tanchuangShow = true
			
		},
		async toSaveSite(){
			//判断各个选项是否为空  并提示
			if(this.$u.test.isEmpty(this.addressInfo.name)){
				this.$u.toast("收货人不能为空")
				return
			}
			if(this.$u.test.isEmpty(this.addressInfo.phone)){
				this.$u.toast("收货人手机号不能为空")
				return
			}
			if(!this.$u.test.mobile(this.addressInfo.phone)){
				
				this.$u.toast("手机号格式不正确")
				return
			}
			if(this.$u.test.isEmpty(this.addressInfo.address)){
				this.$u.toast("收货所在地区不能为空")
				return
			}
			if(this.$u.test.isEmpty(this.addressInfo.addressDetal)){
				this.$u.toast("详细地址不能为空")
				return
			}
			
			if(this.addressInfo.addressId!=0){
				const param = {
					userId:this.addressInfo.userId,
					name:this.$u.trim(this.addressInfo.name),
					phone:this.$u.trim(this.addressInfo.phone),
					address:this.$u.trim(this.addressInfo.address) +" "+ this.$u.trim(this.addressInfo.addressDetal,'all'),
					areaCode:this.addressInfo.areaCode,
					isDefault:this.checked? 1:0
				}
				const res = await this.$u.api.updateAddress(this.addressInfo.addressId,param)
				if(res == true){
					this.$u.toast("更新成功")
					setTimeout(()=>{
						this.$u.route({
							type:'back'
						})
					},1000)
					
				}
				
			}else{
				const param = {
					userId:this.vuex_user.id,
					name:this.addressInfo.name,
					phone:this.addressInfo.phone,
					address:this.addressInfo.address +" "+ this.addressInfo.addressDetal,
					areaCode:this.addressInfo.areaCode,
					isDefault:this.checked? 1:0
				}
				console.log(param)
				const res = await this.$u.api.addAddress(param)
				console.log(res)
				if(res == true){
					this.$u.toast("添加成功")
					setTimeout(()=>{
						this.$u.route({
							type:'back'
						})
					},1000)
					
				}
			}
		},
		confirm(e){
			
			this.addressInfo.areaCode = e.area.value
			let address = e.province.label + " " + e.city.label + " " + e.area.label
			this.addressInfo.address = address
			this.areaCode = []
			this.areaCode.push(e.province.value)
			this.areaCode.push(e.city.value)
			this.areaCode.push(e.area.value)
		},
		cancel(){
			
			
		},
		setDefault() {
			
		},
		showRegionPicker() {
			this.show = true;
		}
	},
	onLoad(option){
		
		if(!this.$u.test.isEmpty(option)){
			this.addressInfo.addressId = option.addressInfo.split('=')[1]
			this.addressInfo.userId = option.userId
			
			this.addressInfo.name = option.name
			this.addressInfo.phone = option.phone
			//地址切割
			if(option.address.lastIndexOf(' ')>0){
				// var address = option.address.substr(0,option.address.lastIndexOf(' ')+1)
				//var detail = option.address.substr(option.address.split(' ').slice(3,).join(" "),option.address.length)
				var temp = option.address.split(' ')
				var address= temp[0] + " " + temp[1] + " " + temp[2]
				delete temp[0]
				delete temp[1]
				delete temp[2]
				var detail = temp.join('')
			}
			this.addressInfo.address = address
			this.addressInfo.addressDetal = detail
			
			
			if(!this.$u.test.isEmpty(option.areaCode)){
				this.areaCode = []
				this.areaCode.push(option.areaCode.substr(0,2))
				this.areaCode.push(option.areaCode.substr(0,4))
				this.areaCode.push(option.areaCode)
			}
			this.addressInfo.areaCode = option.areaCode
			
			this.checked = option.isDefault==1 ? true:false
		}else{
			this.addressInfo.phone = this.$vm.vuex_user.tel
			
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
				margin-right: 20rpx;
			}
		}
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 300rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 380rpx;
	background-color: #ff9900;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
.delSite {
	display: flex;
	justify-content: space-around;
	width: 300rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 60rpx;
	background-color: #fa3534;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
